<template>
<div id="SeeCoupon">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>查看在线购券</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">       
        <el-form>
              <el-form-item label="券名称" :label-width="formLabelWidth">
                <el-input v-model="userInfo.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="优惠券" :label-width="formLabelWidth">
                <el-input v-model="array_length" style="width:302px;" disabled></el-input>
                <el-button type="primary"
                  size="small"
                  @click="Choice">
                  查看
                </el-button>
              </el-form-item>
              <el-form-item style="padding-left: 120px">
                <el-button type="primary"
                    size="small"
                    @click="Preservation">
                    返回
                </el-button>
              </el-form-item>             
        </el-form>        
    </div>
    <!-- 查看弹出框 -->
    <el-dialog title="查看电子券" :visible.sync="dialogVisible2" width="600px">      
        <el-table :data="tableData" border>            
            <el-table-column
            prop="id"
            label="券ID"
            width="120">
            </el-table-column>
            <el-table-column
            prop="type"
            label="券类型"
            width="120">
            </el-table-column>
            <el-table-column
            prop="name"
            label="券名称"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="money"
            label="售价"
            show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column  label="售价" width="300">
              <template slot-scope="scope">
              <el-tag type="success" v-for='(v,index) in scope.row.buyTypes' :key="index">{{v.money}}元</el-tag>
              </template>
            </el-table-column> -->
        </el-table>       
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="SeeSure">确 定</el-button>
    </div>
    </el-dialog>
</div>   
</template>
<script>
import { GetOnlinePurchase } from "@/public/js/saleRoom";
export default {
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
      pageSize: 19,
      pageNum: 1,
      pageNo: 1,
      total: 0,
      search: "",
      couponIds: "", //选择打钩的集合
      array_length: "",
      typeStr: "全部类型",
      formLabelWidth: "120px",
      dialogVisible2: false,
      SeeData: {},
      tableData: "",
    };
  },
  created() {
    this.tableData = this.userInfo.buyTypes;
    this.array_length = this.tableData.length + '张';
  },
  mounted() {},
  methods: {
    //设置默认勾选状态
    // showCcDialog() {
    //   this.$nextTick(() => {
    //     this.tableData.forEach(i => {
    //       var sort = "";
    //       if (i.sort) {
    //         this.$refs.multipleTable.toggleRowSelection(
    //           this.tableData.find(d => d.sort === i.sort),
    //           true
    //         );
    //       }
    //     });
    //   });
    // },
    Choice() {
      this.dialogVisible2 = true;
    },
    SeeSure() {
      this.dialogVisible2 = false;
    },
    //返回
    Preservation() {
      this.$router.push("/index/OnlinePurchase");
    },
  }
};
</script>
<style lang="scss">
#SeeCoupon {
  .el-form {
    width: 30%;
  }
  .el-dialog {
    .input {
      width: 200px;
    }
  }
  .el-form-item__content .btn {
    background: #c8c9cc !important;
    border-color: #c8c9cc !important;
    color: #fff;
    margin-left: 142px;
  }
}
</style>
